<template>
	<view class="gjl-components">
		<template v-if="!needPhone">
			<view class="user-info">
				<view class="user-img">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<view class="user-name">
					<open-data type="userNickName"></open-data>
				</view>
			</view>
			<view class="line">
				<u-line color="#f5f5f5" />
			</view>
			<view class="content">
				<view class="tip-box">
					<view class="title">
						申请以下权限
					</view>
					<view class="dec">
						获得你的公开信息（昵称、头像等）
					</view>
				</view>
				<view class="button-box">
					<view class="btn">
						<u-button @click="btnClick(1)"
							:custom-style="{color: '#fff',background: '#1aad19',fontSize: '32rpx'}"
							@getuserinfo="getuserinfo" :open-type="getUserProfile?'':'getUserInfo'" lang="zh_CN">微信授权
						</u-button>
					</view>
					<view class="btn">
						<u-button @click="btnClick(2)" :custom-style="{fontSize: '32rpx'}">邀请码</u-button>
					</view>
				</view>
				<view class="footer-tip">
					首次授权用户如有邀请码,建议填写
				</view>
			</view>
		</template>
		<template v-else>
			<view class="user-info">
				<view class="user-img">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<view class="user-name">
					<open-data type="userNickName"></open-data>
				</view>
			</view>
			<view class="line">
				<u-line color="#f5f5f5" />
			</view>
			<view class="content">
				<view class="tip-box">
					<view class="title">
						亲，您已授权
					</view>
					<view class="dec">
						快去同步会员信息吧
					</view>
				</view>
				<view class="button-box">
					<view class="btn">
						<u-button @click="btnClick(3)"
							:custom-style="{color: '#fff',background: '#1aad19',fontSize: '32rpx'}"
							@getphonenumber="getphonenumber" open-type="getPhoneNumber" lang="zh_CN">一键同步登录
						</u-button>
					</view>
				</view>
				<view class="footer-tip">
					<text class="text">登录注册即代表阅读并同意</text><text class="a" @click="jRouter({path: 'richtextIndex',query:{id:'rule_user'}})">《用户协议》</text>
				</view>
			</view>
		</template>
		<inviteModel ref="inviteModel" v-model="inviteCode"></inviteModel>
	</view>
</template>

<script>
	import inviteModel from './invite-model.vue';
	export default {
		components:{
			inviteModel
		},
		props:{
			needPhone: {
				type: [Boolean],
				default: false
			}
		},
		data() {
			return {
				getUserProfile: true,
				inviteCode: '',
				mobile: {}
			}
		},
		created() {
			if (!uni.canIUse('getUserProfile')) {
				this.getUserProfile = false
			}
		},
		methods: {
			getphonenumber(e){
				let that = this;
				let detail = e.detail;
				if (detail.errMsg != 'getPhoneNumber:ok'){
					return
				}
				this.mobile = detail;
				that.login();
			},
			getuserinfo(e) {
				let that = this;
				const infoRes = e.detail;
				that.infoRes = infoRes;
				that.login();
				this.$emit('login', 'MP-WEIXIN');
			},
			btnClick(type) {
				let that = this;
				if (type == 1) {
					if (!this.getUserProfile) {
						return
					}
					uni.getUserProfile({
						desc: '用于完善会员资料',
						success: (infoRes) => {
							that.infoRes = infoRes;
							that.login();
						},
						fail: (err) => {
							console.log(err)
						}
					})
					this.$emit('login', 'MP-WEIXIN')
					return
				}
				if (type == 2) {
					this.$refs.inviteModel.show = true;
					this.$emit('invite', 'MP-WEIXIN')
					return
				}
				if(type == 3){
					this.$emit('phone', 'MP-WEIXIN')
					return
				}
			},
			login(){
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.loginRes = loginRes;
						that.apiLogin(that.loginRes,that.infoRes);
					}
				});
			},
			apiLogin(loginRes,infoRes) {
				let data = {
					code: loginRes.code,
					user_info: infoRes.rawData,
					signature: infoRes.signature,
					invite_code: this.inviteCode || "",
					encrypted_data: this.mobile.encryptedData || '',
					iv: this.mobile.iv || '',
					apiLoadText: '登陆中'
				}
				this.$apis.wxAutoLogin(data).then((res)=>{
					//this.$emit('loginSuccess',res);
					console.log(res)
					if(res.token){
						this.$emit('loginSuccess',res);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.gjl-components {
		height: 100%;
		display: flex;
		flex-direction: column;

		.line {
			height: 0;
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;

			.footer-tip {
				font-size: $h5;
				line-height: $h5;
				color: $subtext-color;
			}

			.button-box {
				box-sizing: border-box;
				padding: 72rpx 20rpx 50rpx;
				width: 100%;

				.btn+.btn {
					margin-top: 20rpx;
				}
			}

			.tip-box {
				text-align: center;

				.dec {
					font-size: 28rpx;
					margin-top: 20rpx;
				}

				.title {
					font-weight: 600;
					font-size: 36rpx;
				}
			}
		}

		.user-info {
			padding: 80rpx 0 48rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-img {
				width: 190rpx;
				height: 190rpx;
				border: 2px solid #fff;
				margin: 0rpx auto 0;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 1px 0px 5px #CCC;
			}

			.user-name {
				font-size: 35rpx;
				font-weight: 600;
				margin-top: 10px
			}
		}
	}
</style>
